<template>
  <el-form-item
    :prop="formProp"
    :rules="setRules(formInfo, formData, eachIndex, topExpose)"
    class="form-btn-item"
    :class="{
      'form-item-whole-line': _info.width === 100,
      'number-form-item': _info.field_type === 'input_number',
      'table-form-item': _info.field_type === 'table'
    }"
    :label-width="labelWidth"
  >
    <template #label v-if="_info.name">
      {{ _info.name }}
      <zx-header-tip v-if="_info.tips">
        <div v-html="_info.tips" />
      </zx-header-tip>
      ：
    </template>
    <!-- 输入框 -->
    <Input
      v-if="_info.field_type === 'input'"
      :formInfo="formInfo"
      :formData="formData"
      :topExpose="topExpose"
      :eachIndex="eachIndex"
    />
    <!-- 数字输入 -->
    <InputNumber
      v-if="_info.field_type === 'input_number'"
      :formInfo="formInfo"
      :formData="formData"
      :topExpose="topExpose"
      :eachIndex="eachIndex"
    />
    <!-- 文本域 -->
    <Textarea
      v-if="_info.field_type === 'textarea'"
      :formInfo="formInfo"
      :formData="formData"
      :topExpose="topExpose"
    />
    <!-- 下拉 -->
    <Select
      v-if="_info.field_type === 'select'"
      :formInfo="formInfo"
      :formData="formData"
      :topExpose="topExpose"
      :TrendsFormRef="TrendsFormRef"
    />
    <!-- 级联 -->
    <Cascader
      v-if="_info.field_type === 'cascader'"
      :formInfo="formInfo"
      :formData="formData"
      :topExpose="topExpose"
      :TrendsFormRef="TrendsFormRef"
    />
    <!-- 单选 -->
    <Radio
      v-if="_info.field_type === 'radio'"
      :formInfo="formInfo"
      :formData="formData"
      :topExpose="topExpose"
      :TrendsFormRef="TrendsFormRef"
    />
    <!-- 多选 -->
    <Checkbox
      v-if="_info.field_type === 'checkbox'"
      :formInfo="formInfo"
      :formData="formData"
      :topExpose="topExpose"
      :TrendsFormRef="TrendsFormRef"
    />
    <!-- 表格 -->
    <Table
      v-if="_info.field_type === 'table'"
      :formInfo="formInfo"
      :formData="formData"
      :topExpose="topExpose"
      :TrendsFormRef="TrendsFormRef"
    />
    <!-- 上传 -->
    <Upload
      v-if="_info.field_type === 'upload'"
      :formInfo="formInfo"
      :formData="formData"
      :topExpose="topExpose"
      :imgListMap="imgListMap"
    />
    <!-- 单位 -->
    <span v-if="_info.unit" class="ml-5">{{ _info.unit }}</span>
    <!-- 可以添加/移除 -->
    <template v-if="eachIndex != undefined">
      <!-- 添加按钮 -->
      <el-button
        v-if="eachIndex === 0 || eachIndex < _rules.min_array"
        link
        @click="addItem"
      >
        <el-icon><CirclePlus /></el-icon>
      </el-button>
      <!-- 移除按钮 -->
      <el-button v-else link @click="delItem">
        <el-icon><Remove /></el-icon>
      </el-button>
    </template>
  </el-form-item>
</template>

<script setup>
import { getInfo, getRules, setRules } from '../const';
import Input from '../FormComponent/Input';
import InputNumber from '../FormComponent/InputNumber';
import Textarea from '../FormComponent/Textarea';
import Select from '../FormComponent/Select';
import Cascader from '../FormComponent/Cascader';
import Radio from '../FormComponent/Radio';
import Checkbox from '../FormComponent/Checkbox';
import Table from '../Table';
import Upload from '../FormComponent/Upload';

const props = defineProps({
  formInfo: {
    type: Object,
    default: () => {}
  },
  formData: {
    type: Object,
    default: () => {}
  },
  imgListMap: {
    type: Object,
    default: () => {}
  },
  TrendsFormRef: {
    type: Object,
    default: null
  },
  topExpose: {
    type: Object,
    default: () => {}
  },
  // 循环索引
  eachIndex: {
    type: Number,
    default: undefined
  }
});

const _info = computed(() => getInfo(props.formInfo));
const _rules = computed(() => getRules(props.formInfo));

const labelWidth = computed(() => {
  if (_info.value.field_type === 'table') {
    return 'auto';
  } else if (_info.name) {
    return undefined;
  } else {
    return 0;
  }
});

// 如果是循环则需要根据索引处理prop
const formProp = computed(() => {
  const eachIndex = props.eachIndex;
  if (eachIndex == undefined) return _info.value.field;
  return `${_info.value.field}.${eachIndex}`;
});

// 添加
function addItem() {
  const max_array = _rules.value.max_array;
  const field = _info.value.field;
  const value = props.formData[field] || [];
  if (value.length >= max_array) {
    return $msg.warning(`${_info.value.name}最多添加${max_array}个`);
  }
  value.push('');
}

// 移除
function delItem() {
  const eachIndex = props.eachIndex;
  const field = _info.value.field;
  const value = props.formData[field] || [];
  value.splice(eachIndex, 1);
}
</script>

<style lang="scss" scoped></style>
